<template>
	<!-- 全部账单-账单过滤页面 -->
	<view id="filter_bill_container">
		<view class="filter_box">
			<view class="filter_box_default">
				<!-- 账本选择 -->
				<view class="filter_box_default_book" @click="showSelectBookPropm">
					{{ selectedBook }}
				</view>
				<!-- 月份选择 -->
				<view class="filter_box_default_month" >
					<!-- {{ selectedDate }} -->
					<MonthSelect 
						timeType="month" 
						@getData="getData" 
						placeholder="请选择日期" 
						minSelect="2000/01/01" 
						maxSelect="2025/12/31">
					</MonthSelect>
				</view>
			</view>
			<view class="filter_box_extend" @click="showfilterSelectPopup">
				<span class="filter_box_extend_text">扩展过滤项</span>
			</view>
		</view>
		
		<!-- 账本选择弹出层 -->
		<uni-popup ref="book_select_popup" type="bottom" border-radius="10px 10px 0 0">
			<view class="select_books">
				<view class="book_item" 
					v-for="(book, index) of bookData" 
					:key="index" 
					:class="{ 'not_first_book': index != 0, 'selected_book': book.name == selectedBook}"
					@click="switchBook(book)"
					>
					<view class="book_item_book">
						<image src="../../static/my/book.png" mode="heightFix"></image>
					</view>
					<view class="book_item_text">
						{{ book.name }}
					</view>
				</view>
			</view>
		</uni-popup>
		
		<!-- 扩展选项过滤项 -->
		<uni-popup ref="filter_select_popup" type="bottom" border-radius="10px 10px 0 0">
			<view class="select_filter_item">
				<!-- 账户选择过滤 -->
				<view class="select_filter_item_acc">
					<view class="select_filter_item_acc_title">
						账户类型：
					</view>
					<view class="select_filter_item_acc_se">
						<uni-data-select
						    v-model="filterParam.accountType"
						    :localdata="assetAcountOption"
							placeholder="选择资产账户"
						    >		
						</uni-data-select>
					</view>
				</view>
				<!-- 日期范围过滤 -->
				<view class="select_filter_item_date">
					<view class="select_filter_item_date_title">
						日期范围：
					</view>
					<uni-datetime-picker
						v-model="range" 
						type="datetimerange" 
						@maskClick="maskClick" 
					/>
				</view>
				<!-- 收支类型过滤 -->
				<view class="select_filter_item_ie_type">
					<view class="select_filter_item_ie_type_text">
						收支类型：
					</view>
					<view class="select_filter_ie_value">
						<view class="select_filter_ie_value_item" 
							@click="selecteIeTypeHandle(1)"
							:class="{'selected_ie_type': filterParam.ieType == 1}"
							>
							收入
						</view>
						<view class="select_filter_ie_value_item" 
							@click="selecteIeTypeHandle(2)"
							:class="{'selected_ie_type': filterParam.ieType == 2}"
							>
							支出
						</view>
					</view>
				</view>
				
				<!-- 取消和保存 -->
				<view class="book_select_option">
					<view class="book_select_option_cancle book_select_option_btn"
						@click="resetFilterParam">
						重置
					</view>
					<view class="book_select_option_save book_select_option_btn"
						@click="filterExParam">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
		
		<!-- 账本列表 -->
		<view class="bill_list">
			<!-- 账单组件 -->
			<Bill showPosition="all_bill" :billFilterVo="filterParam"></Bill>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import MonthSelect from '../../components/MonthSelect/MonthSelect.vue';
import Bill from "../../components/Bill/Bill.vue"

// 账本选择弹出框
let book_select_popup = ref();
// 扩展过滤项弹出层
let filter_select_popup = ref();

// 已选择的账本名称
let selectedBook = ref('选择账本');
// 已选择的日期时间
let selectedDate = ref();
// 可选择账本数据
let bookData = ref([]);

let range = ref(['2024-09-1 00:00:00', '2025-12-12 00:00:00'])

// 账户类型选择器选择列表
let assetAcountOption = ref([]);

// 过滤账单对象参数
let filterParam = ref({
	accountBookId: "", // 账本ID
	month: "", // 月份
	startTime: "", // 开始时间
	endTime: "", // 结束时间
	ieType: "", // 收支类型
	accountType: "" // 账户类型
})

onMounted(() => {
	initFilterDate(); // 初始化过滤条件
	getUserBooks(); // 获取用户账本
	getUserAssetAccount(); // 获取资产账户数据
});

// 收支类型选择处理器
function selecteIeTypeHandle(selectedType){
	filterParam.value.ieType = selectedType;
}

// 展开账本选择框
function showSelectBookPropm() {
	book_select_popup.value.open();
}

// 展开月份选择弹出层
function showfilterSelectPopup() {
	filter_select_popup.value.open();
}

// 初始化账单过滤的时间项
function initFilterDate() {
	const today = new Date();
	const year = today.getFullYear(); // 获取当前年份
	const month = (today.getMonth() + 1).toString().padStart(2, '0'); // 获取当前月份并确保两位数

	selectedDate.value = `${year}-${month}`;
}

// 获取用户账本列表
function getUserBooks() {
	bookData.value = uni.getStorageSync('accountBookData');
	// 默认选择当前已选的账本
	selectedBook.value = uni.getStorageSync("selectedBook");
	// 赋值过滤项参数
	filterParam.value.accountBookId = getBookIdByBookName(selectedBook.value);
}

// 根据账本名称获取账本ID
function getBookIdByBookName(bookName){
	for (let book of uni.getStorageSync('accountBookData')) {
		console.log(book);
		if(bookName == book.name){
			return book.id;
		}
	}
	return 0;
}

// 切换账本
function switchBook(book){
	// 切换已选账本名称
	selectedBook.value = book.name;
	// 赋值过滤项参数
	filterParam.value.accountBookId = book.id;
	// 关闭弹出层
	book_select_popup.value.close();
}

// 月份选择
function getData(timeValue){
	// 赋值YYYY-MM （月份）
	filterParam.value.month = timeValue;
}

// 重置过滤条件参数
function resetFilterParam(){
	for (let key in filterParam.value) {
		filterParam.value[key] = "";
	}
	
	// 赋予当前选择的账本
	filterParam.value.accountBookId = getBookIdByBookName(selectedBook.value);
	
	// 给定默认的查询日期范围
	// filterParam.value.startTime = range.value[0];
	// filterParam.value.endTime = range.value[1];
	
	range.value = ["2024-09-01 00:00:00", "2025-12-12 00:00:00"];
	
	uni.$showT("重置条件")
	
}

// 使用而外参数进行账单过滤
function filterExParam(){
	// 日期时间过滤赋值
	filterParam.value.startTime = range.value[0];
	filterParam.value.endTime = range.value[1];
	
	console.log("请求过滤对象参数:", filterParam.value);
	// 执行查询
	execteQuery()
}

// 执行主动而外参数查询
function execteQuery(){
	console.log("执行查询...");
}

// 获取用户资产账户
async function getUserAssetAccount(){
	// 获取当前登录用户信息
	let userInfo = JSON.parse(uni.getStorageSync("userInfo"));
	
	const res = await uni.$http.get(`/assetAccounts/getAllByUserId/${userInfo.id}`);
	
	// 资金账户为空
	if(res.data.code == 0){
	    uni.$showT(res.data.msg);
	    return 0;
	}
	
	assetAcountOption.value = [];
	// 根据所有资金账户计算出总资产
	for (let assetAcount of res.data.data) {
		assetAcount.balance = assetAcount.balance.toFixed(2);
		let textTemp = `${assetAcount.name} (余额:${assetAcount.balance})`;
		assetAcountOption.value.push({value: assetAcount.id, text: textTemp});
	}
	
}

</script>

<style lang="scss" scoped>
.filter_box_default {
	box-sizing: border-box;
	display: flex;
	padding: 25rpx;
	background-color: #fff;
	font-size: 14px;
}

.filter_box_default_book,
.filter_box_default_month {
	background-color: #eca03c;
	border-radius: 20rpx;
	padding: 10rpx;
	color: white;
	font-size: 14px;
}

.filter_box_default_month {
	margin-left: 20px;
	color: #fff;
}

.select_books {
	background-color: #fff;
	display: flex;
	padding: 30rpx 10px;
	flex-wrap: wrap;
}

.book_item {
	font-size: 12px;
	padding: 10rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.book_item_book image {
	height: 50px;
}

.not_first_book {
	margin-left: 20rpx;
}

.select_month {
	background-color: #fff;
}

.filter_box{
	display: flex;
	justify-content: space-between;
	// border: solid red 1px;
	background-color: #fff;
	// padding: 0px 15rpx;
	padding-right: 20rpx;
}

.filter_box_extend{
	// border: solid red 1px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 14px;
}

.filter_box_extend_text{
	background-color: #eca03c;
	border-radius: 20rpx;
	padding: 10rpx 15rpx;
	color: white;
}

.select_filter_item{
	background-color: #fff;
	padding: 20rpx;
}

.select_filter_item{
	padding: 30rpx 20px;
}

.select_filter_item_title{
	padding-bottom: 6rpx;
	font-size: 14px;
}

.select_filter_ie_value{
	display: flex;
}

.select_filter_ie_value_item{
	font-size: 14px;
	padding: 10rpx 20rpx;
	border: solid #bababa 1px;
	margin-left: 10rpx;
	border-radius: 15rpx;
}

.select_filter_item_ie_type{
	display: flex;
	align-items: center;
	padding-top: 40rpx;
	font-size: 14px;
}

.select_filter_item_date{
	display: flex;
	align-items: center;
	font-size: 14px;
	padding-top: 40rpx;
}

.select_filter_item_acc{
	display: flex;
	align-items: center;
	font-size: 14px;
}

.select_filter_item_acc_se{
	// border: solid red 1px;
	width: 200px;
}

.select_filter_item_acc_value{
	border: solid #afafaf 1px;
	padding: 14rpx 35rpx;
	border-radius: 15rpx;
}

.book_select_option{
	display: flex;
	background-color: #fff;
	position: relative;
	justify-content: space-around;
	padding: 0px 20rpx;
	padding-bottom: 10rpx;
	margin-top: 40rpx;
}

.book_select_option_btn{
	padding: 20rpx;
	font-size: 14px;
	width: 50%;
	// border: solid #737373 1px;
	text-align: center;
	border-radius: 15rpx;
	color: white;
}

.book_select_option_cancle{
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
	background-color: #e7cf84;
}

.book_select_option_save{
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
	background-color: #ffa639;
}

.selected_book{
	color: #ffa639;
}

.selected_ie_type{
	background-color: #eca03c;
	color: white;
}

.bill_list{
	margin-top: 20rpx;
	padding: 30rpx 20rpx;
	background-color: #fff;
}



</style>
